<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import resize from './mixins/resize'
export default {
  mixins: [resize],
  computed:{
  },
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      // 此处的 1920 为设计稿的宽度
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    },
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOptions(this.chartData)
    },
    setOptions({name,color,data}) {
      var total = 0;
      data.forEach((item)=>{
        total += parseInt(item.value)
      })

      const rich = {
        name: {
          fontSize:  this.fontSize(16),
          align: 'left',
          padding: [0, this.fontSize(10), this.fontSize(20), 0],
        },
        name1: {
          fontSize:  this.fontSize(16),
          align: 'left',
          padding: [0, 0, 0, this.fontSize(10)],
        },
        title: {
          color: '#ffffff',
          fontWeight:'bold',
          padding: [this.fontSize(10), 0, 0, 0],
          fontSize:  this.fontSize(18),
        },
        titleValue: {
          color: '#35d2ff',
          padding: [0, 0, 0, 0],
          fontSize:  this.fontSize(16),
          fontWeight: 'bold',
        },
      };

      const title = {
        name:name,
        value:total,
      }
      let option = {
        color:color,
        tooltip: {
          trigger: 'item',
          borderColor:'#f2f3f7',
          confine: true,
          padding: [4, 5], //内边距
          textStyle: {
            color: '#f2f3f7',
            fontWeight: '400',
            fontSize:this.fontSize(14),
          },
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top:'center',
          width:'30%',
          itemWidth: this.fontSize(20),
          itemHeight: this.fontSize(10),
          textStyle: {
            fontWeight: 400,
            // color: '#636E79',
            fontSize: this.fontSize(14),
            // lineHeight: this.fontSize(30),
            rich,
            color(params) {
              let colorList = color
              return colorList[params.dataIndex]
            },
          },
          formatter: function (name) {
            let res = data.filter(v => v.name === name)
            let str = ''
            str = '{name1|' + res[0].name + '}{name1|' + res[0].value + '}'
            return str
          },
        },
        series: [{
          type: 'pie',
          roseType: 'radius',
          center: ['30%', '50%'],
          radius: [this.fontSize(60), this.fontSize(80)],
          data: data,
          label: {
            show: true,
            position: 'center',
            formatter: () => `{title|${title.name}}\n{titleValue|${title.value}}`,
            rich,
          },
          // label: {
          // 	formatter: '{b}\n {d}%',
          // 	fontWeight: 400,
          // 	color: '#636E79',
          // 	fontSize: this.fontSize(14),
          // 	lineHeight: this.fontSize(22),
          // 	show:false,
          // },
          // labelLine: {
          // 	length:this.fontSize(20),
          // 	length2:this.fontSize(10),
          // 	show: true,
          // },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0,0,0,0.5)'
            }
          }
        }]
      }
      this.chart.setOption(option, true);
    },
  },
}
</script>
